<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>
    <link rel="stylesheet" href="<%- rootUrl %>/res/adapter.css" />
    <link rel="stylesheet" href="<%- rootUrl %>/node_modules/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/common.css" />
    <style>
        html, body {height:100%}
        .entry_div { margin-bottom: 6em;text-align:center}
        .entry_div span {
            font-size: 18px;
            color: #fed;
            background: #b60;
            border: 2px solid #fed;
        }
    </style>
    <title>我爱零吃网欢迎您的光临</title>
    <script src="<%- rootUrl %>/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="<%- rootUrl %>/res/adapter.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="body-nomargin" style="background:black">
<alljs-widget><message-top><%- message %></message-top></alljs-widget>
<div id="size-adapt" style="position:absolute">
    <div id="carouselExampleIndicators" class="carousel slide h-100" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner h-100">
            <div class="carousel-item h-100 active">
                <img class="d-block w-100 h-100" src="img/login01.jpg?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
            </div>
            <div class="carousel-item h-100">
                <img class="d-block w-100 h-100" src="img/login02.jpg?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
            </div>
            <div class="carousel-item h-100">
                <img class="d-block w-100 h-100" src="img/login03.jpg?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
                <div class="carousel-caption">
                    <div class="entry_div"><a href="index.html"><span class="button">进入体验</span></a></div>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <div style="position:fixed;right:10px;top:10px;color:white;background:#666;padding:3px"><span id="timertext">9</span>s后自动跳转到首页</div>
</div>
<script>
window.onresize=function(){
    let div = document.getElementById('size-adapt');
    let rate = window.innerHeight / window.innerWidth;
    let toRate = 8/5;
    if (rate > toRate){
        let margin = 0.5*(window.innerHeight - window.innerWidth * toRate)/window.innerHeight;
        div.style.left=div.style.right='0';
        div.style.top=div.style.bottom=(margin*100).toFixed(2)+'%';
    } else {
        let margin = 0.5*(window.innerWidth - window.innerHeight / toRate)/window.innerWidth;
        div.style.top=div.style.bottom='0';
        div.style.left=div.style.right=(margin*100).toFixed(2)+'%';
    }
};
window.onresize();

$(function() {
    let timertext = $('#timertext');
    let timernum = parseInt(timertext.html());
    let timer = setInterval(() => {
        timertext.html(--timernum);
        if ( !timernum ){
            clearInterval(timer);
            window.location.href = 'index.html';
        }
    }, 1000);
});
</script>
</body>
</html>